<template>
<div style="padding:20px" >
  <div  v-if="!isadd">
    <!-- 商品列表... -->
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="商品名称">
          <el-input v-model="spuName" placeholder="商品名称"></el-input>   
      </el-form-item>
      <el-form-item label="商品编号">
        <el-input v-model="spu" placeholder="商品编号"></el-input>
      </el-form-item>
      <el-form-item label="品牌名称">
         <el-select v-model="brandId" placeholder="请选择品牌">
           <el-option value="">全部</el-option>
            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset" size="mini" >重置</el-button>
        <el-button type="primary" size="mini"  @click="queryList">查询</el-button>
        <el-button type="primary" size="mini"  style="margin-bottom: 10px;" @click="addSpu">新增商品</el-button>
      </el-form-item>
    </el-form>
    <el-row>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号"  width="50">
          </el-table-column>
          <el-table-column prop="name" label="商品名称">
            <template slot-scope="scope">
               <div><el-image :src="scope.row.pictureUrl" style="width: 60px;height: 50px;vertical-align: middle;" fit="contain"></el-image><span>{{scope.row.name}}</span></div>
            </template>
          </el-table-column>
          <el-table-column prop="spu" label="商品编号">
          </el-table-column>
          <el-table-column prop="brandName" label="品牌">
          </el-table-column>
          <el-table-column  label="分类">
            <template slot-scope="scope">
              {{scope.row.categoryName1+"/"+scope.row.categoryName2+"/"+scope.row.categoryName3}}
            </template>
          </el-table-column>
          <!-- <el-table-column  label="是否同步商家">
            <template slot-scope="scope">
              {{scope.row.synMerchant?'是':'否'}}
            </template>
          </el-table-column> -->
          <el-table-column prop="channel" label="发布平台">
             <template slot-scope="scope">
              {{scope.row.channel==0?'权益商城':'采购商城'}}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="shelves" label="状态">
             <template slot-scope="scope">
              <div v-if="scope.row.shelves==1">
            <el-tag  type="success">上架</el-tag>
            </div>
            <div v-else>
              <el-tag type="danger">下架</el-tag>
            </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.shelves==1" size="mini" type="danger" @click="handleDelete(scope.row)">下架</el-button>
              <el-button v-if="scope.row.shelves!=1" size="mini" type="primary" @click="handleDelete(scope.row)">上架</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align:center">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
    </el-row>
  </div>
   <div  v-if="isadd">
      <AddSpu  :type = "type" :spuId = "spuId"  @ListenerChild ="ListenerChild"/>
    </div>
  </div>
</template>
<script>
import { spuAjax } from 'Ajax'
import AddSpu from './addSpu'
export default {
  components:{
        AddSpu,
    },
  name: 'ProductSpu',
  data() {
      return {
        tableData: [],
        handleList: [],
        brandId:'',
        spu:'',
        spuId:'',
        isadd:false,
        type:'add',
        spuName:'',
        // 当前页
        currentPage: 1,
        // 每页多少条
        pageSize: 10,
        total:0,
        brandList:[], //品牌数组
      }
    },
    created(){
        this.queryList()
        this.getbrandList();

    },
    mounted(){
    },
    methods:{
      ListenerChild(value){
        this.isadd = false
        if(value=='commit'){
          this.queryList()
        }
      },
      queryList(){
        var params = {
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          spuName:this.spuName,
          spu:this.spu,
          brandId:this.brandId
        }
        spuAjax.getSpuList(params).then(res => {
          console.log(res)
          this.tableData = res.list
          this.currentPage = res.currPage,
          this.pageSize= res.pageSize
          this.total = res.totalCount
        })
      },
      addSpu(){
        this.isadd = true
        this.type = 'add'
        // this.$router.push({path:'/product/spuadd'});
      },
      // 编辑
      handleEdit(row){
        this.isadd = true;
        this.type = 'edit';
        this.spuId = row.id;
        // this.$router.push({path:'/product/spuadd', query: {spuId: row.id}});
      },
      // 下架
      handleDelete(row){
        this.$confirm('确定操作吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
              let params = {
                id:row.id,
                shelvesMark:row.shelves==1?false:true
              }
              spuAjax.operationSpu(params).then(res => {
                if(res.ok){
                  this.$message({ type: 'success', message: '操作成功' })
                  this.queryList()
                } else{
                  this.$message({ type: 'error', message: '操作失败' })
                }
              })
            })
      },
      //重置
      reset(){
        this.spuName = '';
        this.spu = '';
        this.brandId = '';
      },
      // 每页多少条
      handleSizeChange(val) {
        this.pageSize = val;
        this.queryList();
      },
      // 当前页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.queryList();
      },
       //商品品牌
        getbrandList(){
            spuAjax.getPushBrandVoList().then(res => {
                this.brandList = res
            })
        },
    }
}
</script>

<style scoped>

</style>
